<template>
  <div class="preview">
    <p v-if="field" style="font-size: 12px; color: #303753">
      {{ field }}
    </p>
    <el-input
      v-if="type === 'text'"
      v-model="value"
      placeholder="请输入内容"
    ></el-input>
    <el-input
      type="textarea"
      :rows="2"
      v-if="type === 'multi-text'"
      v-model="value"
      placeholder="请输入内容"
    ></el-input>
    <el-select
      v-if="type === 'radio'"
      v-model="value"
      placeholder="请选择"
      style="width: 100%"
    >
      <el-option
        v-for="item in data"
        :key="item.key"
        :label="item.value"
        :value="item.key"
      >
      </el-option>
    </el-select>
    <el-select
      v-if="type === 'dropdown'"
      v-model="value"
      multiple
      placeholder="请选择"
      style="width: 100%"
    >
      <el-option
        v-for="item in data"
        :key="item.key"
        :label="item.value"
        :value="item.key"
      >
      </el-option>
    </el-select>
    <div v-if="type === 'checkbox'">
      <el-checkbox
        v-for="item in data"
        :key="item.key"
        :label="item.key"
        v-model="item.isDefault"
        >{{ item.value }}</el-checkbox
      >
    </div>
    <el-input-number
      v-if="type === 'number'"
      v-model="value"
      :controls="true"
      size="small"
    >
    </el-input-number>
    <el-cascader
      :clearable="true"
      style="width: 100%"
      size="small"
      v-if="type === 'cascade'"
      v-model="value"
      :options="data.children"
      :props="{
        checkStrictly: true,
        fillLevel: !this.fillLevel,
        label: 'value',
        value: 'key',
        emitPath: false,
      }"
      :show-all-levels="true"
      :collapse-tags="false"
      placeholder="请选择"
    >
    </el-cascader>
    <el-date-picker
      v-if="type === 'date'"
      v-model="value"
      type="date"
      placeholder="选择日期"
    >
    </el-date-picker>
    <el-date-picker
      v-if="type === 'datetime'"
      v-model="value"
      type="datetime"
      placeholder="选择日期时间"
    >
    </el-date-picker>
    <el-date-picker
      v-if="type === 'date-range'"
      v-model="value"
      type="daterange"
      range-separator="-"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
    >
    </el-date-picker>
    <el-date-picker
      v-if="type === 'datetime-range'"
      v-model="value"
      type="datetimerange"
      range-separator="-"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
    >
    </el-date-picker>
    <el-upload
      class="upLoad"
      v-if="type === 'attachment'"
      action=""
      accept="*"
      :limit="3"
      :show-file-list="false"
      :on-success="uploadSuccess"
      :onProgress="onFileProgress"
      :before-upload="beforeUpload"
      :http-request="uploadRequest"
    >
      <el-button type="primary" size="mini">上传附件</el-button>
    </el-upload>
    <div style="margin-top: 5px" v-if="type === 'attachment'">
      <draggable
        v-model="attachsObj"
        handle=".attachMove"
        animation="150"
        ghostClass="dragClass"
      >
        <div
          class="attachsItem"
          v-for="(item, index) in attachsObj"
          :key="item.id"
        >
          <span class="attachMove" title="拖动排序"
            ><i
              style="font-size: 12px"
              class="V7_iconfont V7_iconV7tubiao_yidong"
            ></i
          ></span>
          <a :href="item.id" target="_blank" download>{{ item.name }}</a>
          <span class="attachDel" @click="attachDelFun(item, index)"
            ><i
              style="font-size: 12px"
              class="V7_iconfont V7_iconV7tubiao_guanbi"
            ></i
          ></span>
          <span title="预览" v-preview.delete="[item.name, item.id]"
            ><i
              style="font-size: 14px; margin-left: 8px; cursor: pointer"
              class="V7_iconfont V7_iconV7tubiao_kejian"
            ></i
          ></span>
        </div>
      </draggable>
    </div>
    <el-progress
      v-if="isShowProgress"
      :text-inside="false"
      :percentage="progress"
      :color="colors"
    ></el-progress>
    <MoreInput v-if="type === 'other'" :value.sync="value"></MoreInput>
  </div>
</template>

<script lang="ts">
/**
 * 实时预览组件
 * @Prop data
 * {
 *  type：类型
 *  value： 默认值
 *  data： 选项
 * }
 */
import { Component, Vue } from 'vue-property-decorator'
import MoreInput from '@/views/newCustomer/common/moreInput.vue'
import { uploadQiniu } from '@/utils/upload'
import draggable from 'vuedraggable'
@Component({
  name: 'Preview',
  components: { MoreInput, draggable }
})
export default class Preview extends Vue {
  [x: string]: any
  private type = ''
  private value: any = ''
  private data: any = []
  private field: any = ''
  private fillLevel = true
  private fileName: any = ''
  private isShowProgress: boolean = false
  private progress = 0
  private attachsObj: any = []
  private colors: any = [
    { color: '#008CEE', percentage: 90 },
    { color: '#67C23A', percentage: 100 }
  ]

  private setData (data) {
    this.type = data.type
    this.value = data.key
    this.field = data.field
    this.data = data.data || []
    this.fillLevel = data.fillLevel
    if (['dropdown', 'radio'].includes(this.type) && data.data) {
      data.data.map(item => { // 默认选中展示
        if (item.isDefault) {
          this.value = item.key
        }
      })
    }
    if (this.type !== 'attachment') {
      this.attachsObj = []
    }
  }

  private uploadRequest (request: any) { // 七牛上传
    uploadQiniu({ type: 'common', fileName: this.fileName }, request)
  }

  private beforeUpload (file: any) { // 上传前验证文件合法性
    this.fileName = file.name.replace(/\s/g, '')
    if (file.size / 1024 / 1024 > 10) {
      this.$message({ message: '附件大小不能超过10M', type: 'error' })
      return false
    } else {
      this.isShowProgress = true
    }
  }

  private uploadSuccess (data: any) { // 上传成功
    const initConfig = this.$store.state.common.initConfig
    this.attachsObj.push({ id: initConfig && data.key ? `${initConfig.qiniuDomainMap.common}/${data.key}` : '', name: this.fileName })
    this.isShowProgress = false
    this.progress = 0
    this.value = this.attachsObj
  }

  private onFileProgress (data: any) {
    this.progress = Math.ceil(data.percent)
  }

  private attachDelFun (item: any, index: number) {
    this.attachsObj.splice(index, 1)
    this.value = this.attachsObj
  }
}
</script>

<style lang="stylus" scoped>
>>> .el-progress__text
  color #ccc
  font-size 12px !important
.dragClass
  opacity 0
.addAttachs
  padding 8px 12px
  font-size 12px
  line-height 12px
  border 1px solid #E7E9ED
  border-radius 4px
  .addBtn
    color #008BEE
  .size
    color #767E91
.attachsItem
  padding 8px 9px
  font-size 12px
  line-height 12px
  background #F1F8FD
  border-radius 4px
  color #008BEE
  display inline-block
  margin 0px 10px 10px 0px
  .attachMove
    margin-right 10px
    cursor move
  .attachDel
    margin-left 10px
    cursor pointer
.preview
  background #F8FAFD
  border-radius 4px
  padding 16px 20px
  /deep/ .el-range__icon
    line-height 24px
  /deep/ .el-range-separator
    line-height 24px
</style>
